<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 10000px;
				background-image: url(img/p_small_002.jpg);
				background-size: cover;
				/* 函数 cover 等比例放大图片 特点：原图按照比例放大存背景空间
				    【开发者：背景图片大小是否等于背景空间】
				    contain 等比例缩放图片 特点：图片按照比例放大存背景空间
					 【开发者：背景图片等比例显示在背景空间】*/
					 
				/* 背景附件--尺寸中存在cover或者 contain*/
				background-attachment: fixed;
				/* 固定 */       
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/p_small_001.jpg);
				/* 问题：超大图-不显示  小图-不显示
				   注意：背景空间大小，如果图小于背景空间---平铺*/
				   background-repeat: no-repeat;
				   /* 不平铺 repeat-xy 横纵平铺 */
				   background-size: 30%;
				   /* 背景尺寸属性值：数值px % | 函数 cover contain */
				   /* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top */
				   background-position:80% 0 ;
			 } 
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, voluptates! Numquam neque dolor sint ducimus maxime non accusantium architecto, molestias officiis porro eum, id nam doloribus exercitationem, ea rem vero.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam vitae illo obcaecati culpa amet libero aperiam repellendus dignissimos, sed perspiciatis consectetur veniam nulla possimus rem eligendi iste exercitationem ea quo!
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto tenetur assumenda excepturi aliquid error illum doloremque ea amet quas quis cumque, dolorum obcaecati! Distinctio, beatae placeat sit quibusdam rerum odio?
		<!-- html img图片 引入一张图片，位置不可随意改变
		     css 背景图片 引入一张图片，位置可以随意改变
			 子属性 background-color 背景属性
			 background-color背景颜色
			 background-position背景定位
			 background-size背景尺寸
			 background-image背景图片
		     background-repeat背景重复
			 background-attachment背景附件
			 复合属性 background: background-image background-color background-position
			                     background-size  background-repeat和 background-attachment
							
			 简写属性 background: background-image  background-position| background-size  
			 替代子属性 background-image background-color background-repeat
			 -->
		<div></div>
	</body>
</html>